<template>
  <div class="user">
    <el-card>
      <h3>用户管理</h3>
      <el-divider></el-divider>
      <div class="userbutton">
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <!-- 导出excel -->
        <template>
          <download-excel
            :data="userList"
            :fields="json_fields"
            :header="title"
            name="用户信息表.xls"
          >
            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <el-button type="success">导出</el-button>
          </download-excel>
        </template>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="userList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column align="center" label="序号" width="100" type="index">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="stationId.name"
            label="部门"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="organId.name"
            label="岗位"
            width="110"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="email" label="邮件" width="140" align="center">
          </el-table-column>
          <el-table-column
            prop="role_id.name"
            label="角色"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column label="状态" width="130">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="setUserStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button
                @click="
                  editDialogVisible = true;
                  editForm = scope.row;
                "
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="del(scope.row._id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 新增对话框 -->
        <el-dialog
          title="新增"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>
            <el-form
              ref="addForm"
              :rules="rules"
              :model="addForm"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="账号" prop="account">
                <el-input v-model="addForm.account"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="stationId">
                <el-select
                  v-model="addForm.stationId"
                  placeholder="请选择活动部门"
                >
                  <el-option
                    v-for="item in departs"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="岗位" prop="organId">
                <el-select
                  v-model="addForm.organId"
                  placeholder="请选择活动岗位"
                >
                  <el-option
                    v-for="item in organs"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="角色" prop="role_id">
                <el-select
                  v-model="addForm.role_id"
                  placeholder="请选择活动角色"
                >
                  <el-option
                    v-for="item in roles"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="addForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input
                  type="textarea"
                  v-model="addForm.desc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改对话框 -->
        <el-dialog
          title="修改"
          :visible.sync="editDialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>
            <el-form
              :rules="rules"
              :model="editForm"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="账号" prop="account">
                <el-input v-model="editForm.account"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="editForm.password"></el-input>
              </el-form-item>
              <el-form-item label="姓名：">
                {{ editForm.name }}
              </el-form-item>
              <el-form-item label="部门：">
                {{ editForm.stationId.name }}
              </el-form-item>
              <el-form-item label="岗位：">
                {{ editForm.organId.name }}
              </el-form-item>
              <el-form-item label="角色" prop="role_id">
                <el-select
                  v-model="editForm.role_id._id"
                  placeholder="请选择活动角色"
                >
                  <el-option
                    v-for="item in roles"
                    :key="item._id"
                    :label="item.name"
                    :value="item._id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="editForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="desc">
                <el-input
                  type="textarea"
                  v-model="editForm.desc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                editDialogVisible = false;
                editUser();
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageSize"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.currentIndex"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        pageSize: 4,
        currentIndex: 1,
      },
      total: 0,
      title: "用户信息表",
      json_fields: {
        姓名: "name",
        账号: "account",
        部门: "stationId.name",
        岗位: "organId.name",
        手机号: "phone",
        邮件: "email",
        角色: "role_id.name",
      },
      ruleForm: {},
      editForm: {
        stationId: "",
        organId: "",
        role_id: "",
        name: "",
      },
      departs: [],
      organs: [],
      roles: [],
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        name: [{ required: true, message: "请输入登录名", trigger: "blur" }],
        stationId: [{ required: true, message: "请选择部门", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        region: [{ required: true, message: "请选择岗位", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
      addForm: {
        account: "",
        password: "",
        name: "",
        stationId: "",
        region: "",
        role: "",
        email: "",
        phone: "",
        status: "",
        desc: "",
      },
      dialogVisible: false,
      editDialogVisible: false,
      userList: [],
    };
  },
  created() {},
  mounted() {
    // 岗位
    this.getUserOrganList();
    // 用户
    this.getUserList();
    // 部门
    this.getDepartList();
    // 角色
    this.getRoleList();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 获取用户数据
    async getUserList() {
      const { data } = await this.$axios.get("/system/getUserList", {
        params: this.queryInfo,
      });
      if (data.code != 200) {
        return this.$message.error("用户列表获取失败");
      }
      console.log(data.data, "55555555");
      this.userList = data.data;
      this.total = data.total;
    },
    // 获取部门数据
    async getDepartList() {
      const { data } = await this.$axios.get("/organ/getStation");
      console.log(data.data, "部门");
      this.departs = data.data;
    },
    // 获取岗位数据
    async getUserOrganList() {
      const { data } = await this.$axios.get("/organ/getOrgan");
      console.log(data.data, "岗位");
      this.organs = data.data;
    },
    // 获取角色数据
    async getRoleList() {
      const { data } = await this.$axios.get("/system/getRoleList");
      console.log(data.data, "角色");
      this.roles = data.data;
    },
    // 添加用户数据
    add() {
      console.log(this.addForm, "555");
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          console.log(valid, "aaaaa");
          this.$axios.post("/system/addUser", this.addForm);
          this.getUserList();
          this.$message.success("用户信息添加成功"),
            (this.dialogVisible = false);
        } else {
          console.log("添加失败");
        }
      });
      this.addForm.account = "";
      this.addForm.password = "";
      this.addForm.name = "";
      this.addForm.stationId = "";
      this.addForm.region = "";
    },
    // 修改用户
    async editUser() {
      await this.$axios.post("/system/doEdit", this.editForm);
      this.$message.success("修改成功"), this.getUserList();
    },
    // 修改用户状态
    async setUserStatus(row) {
      await this.$axios.post(`/system/setStatus/${row._id}`, {
        status: row.status,
      });
      this.$message.success("修改成功");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除
    async del(scope) {
      console.log(scope, "8888888888888");
      await this.$axios.delete("/system/delUser?_id=" + scope);
      this.$message.success("删除成功");
      this.getUserList();
    },

    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getUserList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.currentIndex = newPage;
      this.getUserList();
    },
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  height: 100%;
}
.user .userbutton button {
  font-size: 10px;
}
.user .table {
  margin-top: 15px;
}
.user .userbutton {
  display: flex;
}
.user .userbutton button {
  margin: 10px;
}
.user .page {
  margin-top: 20px;
  margin-left: 450px;
}
</style>
